<script setup>
import FormItemSearch from '@/components/form/FormItemSearch.vue'
import TableColumnIndex from '@/components/table/TableColumnIndex.vue'
import TableColumnTime from '@/components/table/TableColumnTime.vue'
import { usePagination, useRequest } from '@/hooks'
import { logApi } from '@/api'

const title = computed(() => useRoute().meta.title ?? '登录日志')

const form = ref({
  loginName: '',
  userName: '',
  userPhone: '',
  operationTime: ''
})

const formRef = ref()
function reset() {
  formRef.value.resetFields()
  search()
}

const { pageSize, currentPage, pageSizes } = usePagination({
  onChange: () => refresh()
})

const { refresh, data, count } = useRequest(logApi.selectSysLogList, {
  initialData: [],
  immediate: true,
  params: () => ({
    ...form.value,
    pageNo: currentPage.value,
    pageSize: pageSize.value
  })
})

function search() {
  currentPage.value = 1
  refresh()
}
</script>

<template>
  <div>
    <el-card shadow="never">
      <template #header> {{ title }} </template>
      <el-form
        ref="formRef"
        :model="form"
        label-width="90px"
        label-suffix="："
        label-position="left"
        @submit.prevent="search"
      >
        <el-row :gutter="20">
          <FormItemSearch label="账号" prop="userName">
            <el-input v-model.trim="form.userName" clearable />
          </FormItemSearch>
          <FormItemSearch label="操作类型" prop="type">
            <el-input v-model.trim="form.type" clearable />
          </FormItemSearch>
          <FormItemSearch label="操作模块" prop="model">
            <el-input v-model.trim="form.model" clearable />
          </FormItemSearch>
          <FormItemSearch label="操作时间" prop="operationTime">
            <el-date-picker
              v-model="form.operationTime"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              style="width: 100%"
            />
          </FormItemSearch>
        </el-row>

        <el-button type="primary" native-type="submit" @submit="search">
          搜索
        </el-button>
        <el-button @click="reset">重置</el-button>
      </el-form>
    </el-card>

    <el-card shadow="never">
      <el-table :data="data" style="width: 100%">
        <TableColumnIndex :page="currentPage" :page-size="pageSize" />
        <el-table-column prop="userName" label="账号" />
        <el-table-column prop="type" label="操作类型" />
        <el-table-column prop="model" label="操作模块" />
        <el-table-column prop="params" label="操作参数" show-overflow-tooltip />
        <el-table-column prop="description" label="操作描述" />
        <TableColumnTime prop="operationTime" label="操作时间" />
        <el-table-column prop="ip" label="IP" />
      </el-table>

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="pageSizes"
        hide-on-single-page
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
        class="mt-4 justify-end"
        small
      />
    </el-card>
  </div>
</template>
